<template>
	<!-- 忘记密码 -->
	<el-dialog v-model="state.forgetPasswordDialog" title="忘记密码" width="400px">
		<el-form :model="registerData" class="login-from" label-position='top' :rules="rules">
			<el-form-item label="输入您的注册账号" prop="account">
				<el-input v-model="registerData.account" placeholder="请输入您的注册账号" />
			</el-form-item>
			<el-form-item label="输入您的个人邮箱" prop="email">
				<el-input v-model="registerData.email" type="password" placeholder="请输入您的个人邮箱" />
			</el-form-item>
		</el-form>
		<!-- 底部内容 -->
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="state.forgetPasswordDialog = false">取消</el-button>
				<el-button type="primary" @click="openChanagePassword">
					下一步
				</el-button>
			</div>
		</template>
	</el-dialog>
	
	<!-- 修改密码 -->
	<el-dialog v-model="state.changePasswordDialog" title="修改密码" width="400px">
		<el-form :model="registerData" class="login-from" label-position='top' :rules="rules">
			<el-form-item label="输入您的新密码" prop="password">
				<el-input v-model="registerData.password" placeholder="请输入您的新密码" />
			</el-form-item>
			<el-form-item label="请再次确认您的新密码" prop="repassword">
				<el-input v-model="registerData.repassword" type="password" placeholder="请再次确认您的新密码" />
			</el-form-item>
		</el-form>
		<!-- 底部内容 -->
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="state.changePasswordDialog = false">取消</el-button>
				<el-button type="primary" @click="state.changePasswordDialog = false">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { reactive} from 'vue'
	import type { FormRules } from 'element-plus'
	// 表单对象接口
	interface registerData {
		account : string,
		email : string,
		password:string,
		repassword:string,
	}
	// 表单对象
	const registerData : registerData = reactive({
		account: '',
		email: '',
		password:'',
		repassword: '',
	})
	// 表单验证规则
	const rules = reactive<FormRules<registerData>>({
			account:[
				{required:true,message:'请输入您的注册账号',trigger:'blur'},
			],
			email:[
				{required:true,message:'请输入您的注册邮箱',trigger:'change'}
			],
			password:[
				{required:true,message:'请输入您想修改的密码',trigger:'change'}
			],
			repassword:[
				{required:true,message:'请再次确认您的密码',trigger:'change'}
			]
	})
	// 控制弹窗 默认关闭
	const state = reactive({
		forgetPasswordDialog: false,
		changePasswordDialog:false,
	})
	
	
	// 打开修改密码的弹窗
	const openChanagePassword = () =>{
		state.forgetPasswordDialog = false
		state.changePasswordDialog = true
	}
	// 打开弹窗
	const open = () => {
		state.forgetPasswordDialog = true
	}
	
	
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
</style>